<template>
  <div class="box kind">
    <header class="header">
      <van-nav-bar
        title="分类"
        left-arrow
        @click-left="$router.push('/home')"
      />
    </header>
    <div class="content kind">
      <van-tabs v-model="active" @change="onChange">
        <van-tab v-for="item in columnList" :key="item" :title="item">
          <div class="prosc">
                <van-pull-refresh
                  v-model="isLoading"
                  success-text="刷新成功"
                  @refresh="onRefresh"
                >
                  <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                  >
                    <!-- <van-card
                      v-for="item in proList"
                      :key="item.proId"
                      :price="item.price"
                      :title="item.proName"
                      :thumb="item.proImg"
                      @click="fn(item.proId)"
                    > -->
                    <van-grid :column-num="2">
                      <van-grid-item v-for="item in brandList" :key="item.proId" :icon="item.proImg" :text="item.proName"  @click="fn(item.proId)"/>
                    </van-grid>
                    <!-- </van-card> -->
                  </van-list>
                  </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Sidebar, SidebarItem, Tab, Tabs, Card, Tag, Button, Icon, PullRefresh, List, NavBar, Grid, GridItem } from 'vant'

import { getColumn, getPro, getColumnBrand } from '../../api/index.js'

Vue.use(Sidebar)
Vue.use(SidebarItem)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Card)
Vue.use(Tag)
Vue.use(Button)
Vue.use(Icon)
Vue.use(PullRefresh)
Vue.use(List)
Vue.use(NavBar)
Vue.use(Grid)
Vue.use(GridItem)

export default {
  data () {
    return {
      columnList: [],
      brandList: [],
      proList: [],
      active: 0,
      active1: 0,
      loading: false,
      finished: false,
      isLoading: true,
      i: 0
    }
  },
  mounted () {
    getColumn().then(res => {
      this.columnList = res.data.data
      this.onChange(0)
    })
  },
  methods: {
    onChange (idx) {
      this.activeKey = idx
      getColumnBrand({
        column: this.columnList[idx]
      }).then(res => {
        this.brandList = res.data.data
        console.log(res.data)
      })
    },
    onLoad () {
      getPro({ index: this.i++, num: 10 }).then(res => {
        // this.proList = this.proList.concat(res.data.data);
        this.proList = [...this.proList, ...res.data.data]
        this.loading = false
        if (res.data.data.length < 1) {
          this.finished = true
        }
      })
    },
    onRefresh () {
      this.i = 0
      getPro({ index: 0, num: 10 }).then(res => {
        this.proList = res.data.data
        this.isLoading = false
      })
    },
    fn (proId) {
      this.$router.push('/detail/' + proId)
    }
  }
}
</script>

<style lang="scss">
.kind{
  .van-card{
    border: solid 1px #eee;
  }
  .van-card__bottom{
    display: flex;
    justify-content: space-between;
    .van-button{
      width: 0.4rem;
      height: 0.4rem;
    }
  }
  .van-grid-item{
    border: 1px solid #EEEEEE;
    min-height: 1.5rem;
    .van-grid-item__icon{
      font-size: 1.25rem;
    }
  }
}
</style>
